<template>
	<view class="">
		<view>
			<rllr></rllr>
		</view>

		<view class="margin-top-sm">
			<view class="padding-xs w-25 inline-block">
				<view @tap="toBm" class="flex flex-direction align-center relative bg-pink radius shadow padding-sm">
					<text class="text-sl">
						<text class="iconfont icon-baomingrenshu-"></text>
					</text>
					<text class="text-sm">报名</text>
					<text style="top: -2rpx; right: -2rpx;" class="bg-red text-xs round absolute padding-xxs">{{bmnumber}}</text>
				</view>
			</view>
			
			<view class="padding-xs w-25 inline-block">
				<view @tap="yjIn" v-if="ajiaolian.yj == 0" class="flex flex-direction align-center relative bg-pink radius shadow padding-sm">
					<text  class="text-sl">
						<text class="iconfont icon-3"></text>
					</text>
					<text class="text-sm">{{'保证金'}}</text>
					<text style="top: -2rpx; right: -2rpx;" class="bg-red text-xs round absolute padding-xxs">￥{{ajiaolian.yj / 100}}</text>
				</view>
				
				<view @tap="yjOut" v-else  class="flex flex-direction align-center relative bg-pink radius shadow padding-sm">
					<text class="text-sl">
						<text class="iconfont icon-yiquxiao"></text>
					</text>
					<text class="text-sm">{{'退保'}}</text>
					<text style="top: -2rpx; right: -2rpx;" class="bg-red text-xs round absolute padding-xxs">￥{{ajiaolian.yj / 100}}</text>
				</view>
			</view>
			
			<view class="padding-xs w-25 inline-block">
				<view @tap="toKc" class="flex flex-direction align-center relative bg-pink radius shadow padding-sm">
					<text class="text-sl">
						<text class="iconfont icon-kecheng"></text>
					</text>
					<text class="text-sm">课程</text>
					<text style="top: -2rpx; right: -2rpx;" class="bg-red text-xs round absolute padding-xxs">{{kcnumber}}</text>
				</view>
			</view>
			<view class="padding-xs w-25 inline-block">
				<view @tap="toKk" class="flex flex-direction align-center relative bg-pink radius shadow padding-sm">
					<text class="text-sl">
						<text class="iconfont icon-shangkelaoshiwo"></text>
					</text>
					<text class="text-sm">开课</text>
				</view>
			</view>
			<view class="padding-xs w-25 inline-block">
				<view @tap="toYy" class="flex flex-direction align-center relative bg-pink radius shadow padding-sm">
					<text class="text-sl">
						<text class="iconfont icon-yuyuejilu"></text>
					</text>
					<text class="text-sm">预约记录</text>
					<text style="top: -2rpx; right: -2rpx;" class="bg-red text-xs round absolute padding-xxs">{{yyjlnumber}}</text>
				</view>
			</view>
			<view class="padding-xs w-25 inline-block">
				<view @tap="toHyjl" class="flex flex-direction align-center relative bg-pink radius shadow padding-sm">
					<text class="text-sl">
						<text class="iconfont icon-huiyuan"></text>
					</text>
					<text class="text-sm">会员</text>
					<text style="top: -2rpx; right: -2rpx;" class="bg-red text-xs round absolute padding-xxs">{{hynumber}}</text>
				</view>
			</view>
			<view class="padding-xs w-25 inline-block">
				<view @tap="toHyjl" class="flex flex-direction align-center relative bg-pink radius shadow padding-sm">
					<text class="text-sl">
						<text class="iconfont icon-xueshengguanli"></text>
					</text>
					<text class="text-sm">学员</text>
					<text style="top: -2rpx; right: -2rpx;" class="bg-red text-xs round absolute padding-xxs">{{clientids.length}}</text>
				</view>
			</view>
			<view class="padding-xs w-25 inline-block">
				<view @tap="toPj" class="flex flex-direction align-center relative bg-pink radius shadow padding-sm">
					<text class="text-sl">
						<text class="cuIcon-messagefill"></text>
					</text>
					<text class="text-sm">评价</text>
					<text style="top: -2rpx; right: -2rpx;" class="bg-red text-xs round absolute padding-xxs">{{pjnumber}}</text>
				</view>
			</view>
		</view>
		
		<view class="bg-white margin-top-sm">
			<view class="padding-sm solid-bottom flex justify-between align-baseline">
				<view style="width: 40%;" class=" title text-pink">
					<text class="text-xxl  ">
						<text class="iconfont icon-shanchang"></text>
					</text>
					<text>擅长类型</text>
				</view>
				<view @tap="showPicker" style="width: 40%;" class="flex justify-end align-baseline">
					<view v-for="(lxid,index) in ajiaolian.lx" :key="index" class="margin-xs">
						<view class="cu-tag round text-main bg-g-main">{{lxmap[lxid].lxname}}</view>
					</view>
				</view>
			</view>
			<ba-tree-picker ref="treePicker" :selectedData="ajiaolian.lx" :multiple='true'
				@select-change="selectChange" title="选择类型" :localdata="akechenglxs" valueKey="akclxid"
				textKey="lxname" childrenKey="subs" />
		</view>

		<view class="bg-white margin-top-sm">
			<view class="padding-sm solid-bottom flex justify-between align-baseline">
				<view class="text-pink title">
					<text class="text-xxl  ">
						<text class="iconfont icon-huiyuanleixing"></text>
					</text>
					<text>会员类型</text>
					<text class="">【{{ahylxs.length}}】</text>
				</view>
				<view class="text-pink" @tap="addHylx">
					<text class="text-xxl  ">
						<text class="iconfont icon-add"></text>
					</text>
					<text class="text-xs">添加</text>
				</view>
			</view>
			<view class="padding-bottom-sm">
				<view v-for="(hylx,index) in ahylxs" :key="index">
					<view v-if="hylx.hylxid" @click="toHylx(hylx.hylxid)"
						class="margin-sm shadow bg-white padding-xs">
						<view class="padding-xs flex justify-between">
							<text>{{hylx.hlname}}</text>
							<text>￥{{hylx.amount / 100}}</text>
						</view>
						<view class="padding-xs flex justify-between">
							<text>{{hylx.cs}}次</text>
							<text>{{hylx.zq}}天有效</text>
						</view>
					</view>
					<view v-else class="margin-sm shadow bg-white padding-xs">
						<view class="padding-sm flex justify-start">
							<text>名称：</text>
							<input class="solid" placeholder="请输入会员类型名称" v-model="hylx.hlname" />
						</view>
						<view class="padding-sm flex justify-start">
							<text>价格：</text>
							<input class="solid" v-model="hylx.amount" />
						</view>
						<view class="padding-sm flex justify-start">
							<text>次数：</text>
							<input class="solid" v-model="hylx.cs" />
						</view>
						<view class="padding-sm flex justify-start">
							<text>周期（天）：</text>
							<input class="solid" v-model="hylx.zq" />
						</view>
						<view class="padding-sm flex justify-end">
							<button @tap="saveHylx(hylx, index)" class="cu-btn bg-pink round sm">保存</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				ajiaolian: this.store.state.jl,
				lxmap: this.constant.lxmap,
				amount: {},
				akechenglxs: [],
				kcnumber: 999,
				yyjlnumber: 99,
				ahylxs: [],
				hynumber: 0,
				pjnumber: 0,
				bmnumber: 0,
				clientids: []
			}
		},
		created: function() {
			this.init();
		},
		methods: {
			toSet: function() {
				uni.navigateTo({
					url: '/pages/wd/rllr'
				});
			},
			loadKclx: function() {
				this.api("/kc/lx/tree").send({}).then(data => {
					this.akechenglxs = data.akechenglxs;
				});
			},
			showPicker: function() {
				this.$refs.treePicker._show();
			},
			//监听选择（ids为数组）
			selectChange: function(ids, names) {
				if (names) {
					this.lxname = names;
				} else {
					this.lxname = '';
				}
				this.ajiaolian.lx = ids;
				
				this.api("/jl/info/put").send({
					ajiaolian: this.ajiaolian
				}).then(data => {
					this.message.info("修改类型成功");
					this.store.commit("submitJl", this.ajiaolian);
				});
			},
			init: function() {
				this.loadKclx();
				this.loadJl();
					
			},
			loadJl: function() {
				return this.api("/jl/info/get").send({
					jlid: this.store.state.jl.jlid
				}).then(data => {
					this.ajiaolian = data.ajiaolian;
					this.kcnumber = data.kcnumber;
					this.yyjlnumber = data.yyjlnumber;
					this.hynumber = data.hynumber;
					this.ahylxs = data.ahylxs;
					this.pjnumber = data.pjnumber;
					this.amount = data.amount;
					this.bmnumber = data.bmnumber;
					this.clientids = data.clientids;
					this.store.commit("submitJl", this.ajiaolian);
					this.store.commit("submitAmount", this.amount);
					this.common.setAttribute("clientids", data.clientids);
				});
			},
			toKk: function() {
				uni.navigateTo({
					url: '/pages/cjl/kc/kaike'
				});
			},
			toKc: function() {
				uni.navigateTo({
					url: '/pages/cjl/kc/list?jlid='+this.store.state.jl.jlid
				});
			},
			toYy: function() {
				uni.navigateTo({
					url: '/pages/cjl/yy/list?jlid='+this.store.state.jl.jlid
				});
			},
			toBm: function() {
				uni.navigateTo({
					url: '/pages/cjl/bm/list?jlid='+this.store.state.jl.jlid
				});
			},
			toHyjl: function() {
				uni.navigateTo({
					url: '/pages/cjl/hy/lx?jlid='+this.store.state.jl.jlid
				});
			},
			toHylx: function(hylxid) {
				uni.navigateTo({
					url: '/pages/cjl/hy/lx?hylxid='+hylxid
				});
			},
			toXy: function() {
				uni.navigateTo({
					url: '/pages/cjl/xy/list?jlid='+this.store.state.jl.jlid
				});
			},
			
			toPj: function() {
				uni.navigateTo({
					url: '/pages/cjl/pjlist'
				});
			},
			addHylx: function() {
				this.ahylxs.push({
					hylxid: "",
					hlname: "",
					amount: 0,
					zq: 0,
					flg: true,
					stu: true,
					cs: 0
				});
			},
			saveHylx: function(hylx, index) {
				this.api("/jl/hylx/info").send({
					ajiaolian: this.ajiaolian,
					ahylx: hylx
				}).then(data => {
					this.message.info("添加成功");
					this.ahylxs[index] = data.ahylx;
					this.$forceUpdate();
				});
			},
			yjIn: function() {
				this.api("/jl/yj/in").send({
					jlid: this.ajiaolian.jlid
				}).then(res => {
					this.ajiaolian = res.ajiaolian;
					this.pay.exePay(JSON.parse(this.ajiaolian.prepaydata)).then(data => {
						this.message.info("缴纳成功");
						this.init();
					});
				});
			},
			
			yjOut: function() {
				this.api("/jl/yj/out").send({
					jlid: this.ajiaolian.jlid
				}).then(res => {
					this.message.info("退保证金成功，已经转到余额中。");
					this.init();
				});
			},
		}
	}
</script>

<style>
</style>